<template>
  <div class="container" ref="container" style="width: 100%; height: 100%">
    <div class="buttons-group">
      <div>
        <i
          v-if="!playing"
          class="iconfont icon-play jessibuca-btn"
          @click="play"
        ></i>
        <i
          v-if="playing"
          class="iconfont icon-pause jessibuca-btn"
          @click="pause"
        ></i>
        <i class="iconfont icon-stop jessibuca-btn" @click="destroy"></i>
      </div>
      <div>
        <span class="jessibuca-btn">{{ performance }}</span>
        <i
          class="iconfont icon-shuaxin11 jessibuca-btn"
          @click="restartPlay"
        ></i>
        <i
          v-if="!fullscreen"
          class="iconfont icon-weibiaoti10 jessibuca-btn"
        ></i>
        <i
          v-if="fullscreen"
          class="iconfont icon-weibiaoti11 jessibuca-btn"
        ></i>
        <!-- <a-alert message="链接超时 正在重新链接中" type="warning" show-icon /> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "DemoPlayer",
  props: {
    videoURL: {
      default: "",
      type: String,
    },
    autoplay: {
      type: Boolean,
      default: true,
    },
  },

  data() {
    return {
      jessibuca: null,
      wasm: false,
      vc: "ff",
      playing: false,
      quieting: true,
      loaded: false, // mute
      showOperateBtns: false,
      showBandwidth: true,
      err: "",
      speed: 0,
      performance: "",
      volume: 1,
      rotate: 0,
      useWCS: false,
      useMSE: false,
      useOffscreen: false,
      recording: false,
      recordType: "webm",
      scale: 0,
    };
  },
  mounted() {
    this.create();
    window.onerror = (msg) => {
      this.err = msg;
    };
  },
  unmounted() {
    this.jessibuca.destroy();
  },
  methods: {
    create() {
      this.jessibuca = new Jessibuca({
        container: this.$refs.container,
        videoBuffer: 0, // 缓存时长
        isResize: false,
        text: "",
        loadingText: "疯狂加载中...",
        debug: false,
        decoder: "./decoder.js",
        showBandwidth: true, // 显示网速
        operateBtns: {
          fullscreen: true,
          screenshot: true,
          play: true,
          audio: true,
          record: true,
        },
        forceNoOffscreen: true,
        isNotMute: false,
        heartTimeout: 100,
      });
      if (this.jessibuca.hasLoaded()) {
        this.jessibuca.play(this.videoURL);
      } else {
        var _this = this;
        this.jessibuca.on("load", function () {
          _this.jessibuca.play(_this.videoURL);
        });
        // 超时时间内无数据返回,则回调
        this.jessibuca.on("timeout", function () {
          _this.jessibuca.play(_this.videoURL);
        });

        this.jessibuca.on("pause", function () {
          _this.playing = false;
        });

        this.jessibuca.on("play", function () {
          _this.playing = true;
        });

        this.jessibuca.on("mute", function (msg) {
          _this.quieting = msg;
        });

        this.jessibuca.on("performance", function (performance) {
          var show = "卡顿";
          if (performance === 2) {
            show = "非常流畅";
          } else if (performance === 1) {
            show = "流畅";
          }
          _this.performance = show;
        });

        this.jessibuca.on("play", () => {
          this.playing = true;
          this.loaded = true;
          this.quieting = this.jessibuca.isMute();
        });

        if (this.autoplay) {
          _this.jessibuca.play(this.videoURL);
        }
      }
    },
    // 视频地址
    play() {
      this.jessibuca.play(this.videoURL);
    },
    mute() {
      this.jessibuca.mute();
    },
    cancelMute() {
      this.jessibuca.cancelMute();
    },

    pause() {
      this.jessibuca.pause();
      this.playing = false;
      this.err = "";
      this.performance = "";
    },
    volumeChange() {
      this.jessibuca.setVolume(this.volume);
    },
    rotateChange() {
      this.jessibuca.setRotate(this.rotate);
    },
    destroy() {
      if (this.jessibuca) {
        this.jessibuca.destroy();
      }
      this.create();
      this.playing = false;
      this.loaded = false;
      this.performance = "";
    },

    fullscreen() {
      this.jessibuca.setFullscreen(true);
    },

    clearView() {
      this.jessibuca.clearView();
    },

    startRecord() {
      const time = new Date().getTime();
      this.jessibuca.startRecord(time, this.recordType);
    },

    stopAndSaveRecord() {
      this.jessibuca.stopRecordAndSave();
    },

    screenShot() {
      this.jessibuca.screenshot();
    },

    restartPlay(type) {
      if (type === "mse") {
        this.useWCS = false;
        this.useOffscreen = false;
      } else if (type === "wcs") {
        this.useMSE = false;
      } else if (type === "offscreen") {
        this.useMSE = false;
      }

      this.destroy();
      setTimeout(() => {
        this.play();
      }, 100);
    },

    changeBuffer() {
      this.jessibuca.setBufferTime(Number(this.$refs.buffer.value));
    },

    scaleChange() {
      this.jessibuca.setScaleMode(this.scale);
    },
  },
  watch: {
    videoURL(newValue, oldValue) {
      console.info(newValue);
      this.jessibuca.destroy();
      this.create();
    },
  },
};
</script>
<style scoped lang="less">
.container {
  position: relative;
  background: #000;

  .buttons-group {
    width: 100%;
    height: 30px;
    background-color: rgba(43, 51, 63, 0.7);
    position: absolute;
    display: flex;
    left: 0;
    bottom: 0;
    user-select: none;
    z-index: 10;
    padding: 0 10px;
    justify-content: space-between;
    box-sizing: border-box;
  }

  .jessibuca-btn {
    margin: 0 5px;
    color: #fff;
    cursor: pointer;
    line-height: 30px;
    font-size: 12px;
  }
}
</style>
<style>
.jessibuca-container .jessibuca-controls {
  right: 100px;
}
</style>